<template>
  <div>
    <el-form size="medium">
      <el-form-item>
        <el-input size="small" style="width:300px" placeholder="用户名" v-model="obj.nickname"><el-button slot="append" @click="searchData">搜索</el-button></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-table :key="rk" :data="list" height="500">
          <el-table-column width="120px" prop="id" label="ID"></el-table-column>
          <el-table-column label="用户">
            <template slot-scope="scope">
              <div class="product-item">
                <vimage :src="scope.row.picurl" style="border-radius:50%;"></vimage>
                <div class="user_info">
                  <span>{{ scope.row.nickname }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" width="150px" label="联系号码"></el-table-column>
          <el-table-column prop="status_text" width="100px" label="状态"></el-table-column>
          <el-table-column prop="create_time" width="200px" label="注册时间"></el-table-column>
          <el-table-column width="120px" label="操作">
            <template slot-scope="scope">
              <el-button :type="scope.row.checked ? 'primary' : ''" size="small" @click="selectItem(scope.row)">{{ scope.row.checked ? '已选' : '选择' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer">
          <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :page-size="size" :total="total"></el-pagination>
        </div>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" v-if="hidden">
      <el-button @click="outData(false)">取消</el-button>
      <el-button type="primary" @click="outData(true)">确定</el-button>
    </div>
  </div>
</template>

<script>
import {getuserlist} from '@/api/mall/user';
export default {
  name: 'selectUser',
  data() {
    return {
      isLoading: false,
      radio: 1,
      obj: {
        nickname: ''
      },
      objTemp: {},
      list: [],
      //outlist:[],
      page: 1,
      size: 10,
      total: 0,
      rk: 1
    };
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    limit: {
      type: Number,
      default: 100
    },
    hidden: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    if(this.hidden){
      this.selectlist = JSON.parse(JSON.stringify(this.data));
    }else{
      this.selectlist=this.data
    }
    this.searchData();
  },
  // watch: {
  //   data: {
  //     handler: function() {
  //       //重新过滤数据
  //       this.list.forEach(e => {
  //         if (this.data.findIndex(_ => _.id == e.id) > -1) {
  //           e.checked = true;
  //         } else {
  //           e.checked = false;
  //         }
  //       });
  //     }
  //   }
  // },
  methods: {
    initdata(){
      console.log(this.data)
      if(this.hidden){
         this.selectlist = JSON.parse(JSON.stringify(this.data));
      }else{
        this.selectlist=this.data
      }
      this.searchData();
    },
    //搜索数据
    searchData() {
      this.objTemp = Object.assign({}, this.obj);
      this.getData();
    },
    //搜索数据本体
    getData() {
      this.isLoading = true;
      getuserlist(this.page, this.objTemp, this.size).then(res => {
        this.isLoading = false;
        let list = res.msg.data;
        this.total = res.msg.total;
        //筛选哪些数据是传入的已选择数据
        list.forEach(e => {
          if (this.selectlist.findIndex(_ => _.id == e.id) > -1) {
            e.checked = true;
            // this.$set(e, 'checked', true);
          } else {
            e.checked = false;
            // this.$set(e, 'checked', false);
          }
        });
        this.list=list
      });
    },
    //选择单条记录
    selectItem(item) {
      if (!item.checked) {
        if (this.selectlist.length < this.limit) {
          item.checked = true;
          this.selectlist.push(item);
        } else {
          // if (this.limit == 1) {
          //   item.checked = true;
          //   this.selectlist.splice(0, 1);
          //   this.selectlist.push(item);
          // }
          // 数据已满
        }
      } else {
        //移除数据
        item.checked = false;
        this.selectlist.splice(this.selectlist.findIndex(_ => _.id == item.id), 1);
      }
      if(!this.hidden){
         this.$emit('outData', this.selectlist);
      }
      // this.data=this.selectlist
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
    //确定选择数据
    outData(type) {
      if (type) {
        this.$emit('outData', this.selectlist);
      } else {
        this.$emit('outData', false);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.product-item {
  display: flex;
  align-items: center;
  .user_info {
    display: flex;
    flex-direction: column;
  }
  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
